import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { DynamicFormItem } from "@/components/DynamicForm";
import { arrayToObject, getArray, getString, getObject } from "phinney-toolkit";
import { Tabs, Button, Input, TimePicker, Image, Tag } from "antd";
import moment from "moment";
import { getRewardList } from "./service";

// @page 商家
const Business: React.FC<any> = () => {
	let isUnMounted = false;

	const [rewardList, setRewardList] = useState<any>([]);
	const getRewardItemList = async (rewardType: any) => {
		const res = await getRewardList({
			pageIndex: 1,
			pageSize: 100,
			rewardType,
		});
		!isUnMounted &&
			setRewardList(
				getArray(res?.data).map((item: any) => ({
					label: item?.rewardName,
					value: item?.rewardCode,
				}))
			);
	};

	const taskRewards = [
		{ label: "环保币", value: 10 },
		{ label: "能量", value: 20 },
		{ label: "虚拟道具", value: 40 },
	];

	const columnss: ProColumns[] = [
		{
			title: "奖品名称",
			dataIndex: "rewardName",
			search: false,
		},
		{
			title: "奖品数量",
			dataIndex: "rewardNum",
			search: false,
		},
	];

	const columns: ProColumns[] = [
		{
			title: "签到code",
			dataIndex: "signCode",
		},
		{
			title: "签到天数",
			dataIndex: "signDays",
			search: false,
		},
		{
			title: "第几天签到",
			dataIndex: "signName",
			search: false,
		},
		{
			title: "签到奖励",
			dataIndex: "rewards",
			search: false,
			render: (_, record: any) => {
				return (
					<div>
						{record.rewards.map((item: any) => {
							return (
								<Tag color="cyan">
									{item.rewardName}X{item.rewardNum}
								</Tag>
							);
						})}
					</div>
				);
			},
		},
		{
			title: "状态",
			dataIndex: "status",
			search: false,
			valueEnum: {
				1: "启用",
				0: "禁用",
			},
		},
	];

	const getFormItemsSend = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "select",
				label: "签到奖励",
				name: "rewardType",
				required: true,
				options: taskRewards,
				fieldProps: {
					onSelect: async (option: any, form: any) => {
						console.log(option);
						vm.state.rewardList = [];
						const res = await getRewardList({
							pageIndex: 1,
							pageSize: 100,
							rewardType: option,
						});

						let rewardList: any = [];

						rewardList = res?.data.map((item: any) => {
							return {
								label: item.rewardName,
								value: item.rewardCode,
							};
						});
						vm.setState({ rewardType: option, rewardFlag: option, rewardList });
					},
				},
			},

			{
				type: "text",
				label: "奖品数量",
				name: "rewardNum",
				required: true,
			},

			...(vm.state.rewardType == 40
				? [
						{
							type: "select",
							label: "奖品",
							name: "rewardCode",
							options: vm.state.rewardList,
							required: false,
						},
				  ]
				: []),
		];
	};

	const handelFunc = (vm: any) => {
		let params = {
			rowKey: "id",
			scroll: { x: 1000 },
			columns: columnss,
			search: false,
			isInModal: true,
			toolbar: false,
			PageHeaderWrapper: false,
			listProps: {
				url: "/sign/get-reward-list",
				method: "GET",
				requestType: "params",
				formProps: {
					labelCol: { span: 4 },
				},
				paramsHandle: (params: any, record: any) => {
					return {
						...params,
						signCode: vm.state.record.signCode,
					};
				},
			},
			addProps: {
				url: "/sign/reward-add",
				method: "POST",
				requestType: "params",
				paramsHandle: (params: any) => {
					return {
						...params,
						signCode: vm.state.record.signCode,
					};
				},
				modalProps: {
					title: "添加活动奖品",
					formProps: {
						labelCol: { span: 10 },
					},
					formItemsHandle: (_: any, vm: any) => {
						return getFormItemsSend(vm);
					},
				},
			},
			updateProps: {
				url: "/sign/reward-edit",
				method: "POST",
				modalProps: {
					formProps: {
						labelCol: { span: 8 },
					},
					title: "编辑奖品",
					formItemsHandle: (_: any, vm: any) => {
						return getFormItemsSend(vm, true);
					},
					formValuesHandle: (record: any) => {
						return {
							...record,
						};
					},
					content: {
						onInit: async (vm: any) => {
							vm.state.rewardList = [];
							const res = await getRewardList({
								pageIndex: 1,
								pageSize: 100,
								rewardType: vm.state?.record?.rewardType,
							});

							let rewardList: any = [];

							rewardList = res?.data.map((item: any) => {
								return {
									label: item.rewardName,
									value: item.rewardCode,
								};
							});
							vm.setState({
								rewardList,
								rewardType: vm.state?.record?.rewardType,
								rewardCode: vm.state.record.rewardList,
							});
						},
					},
				},
				paramsHandle: async (params: any) => {
					return {
						...params,
						signCode: vm.state.record.signCode,
					};
				},
			},
			deleteProps: {
				url: "/sign/reward-del",
				method: "POST",
			},
		};
		return (
			<div>
				<Tabs>
					<Tabs.TabPane tab="签到奖励" key="1">
						<IntegrationTable {...params} />
					</Tabs.TabPane>
					{/* <Tabs.TabPane tab="活动奖品" key="2">
						<IntegrationTable {...params2} />
					</Tabs.TabPane> */}
				</Tabs>
			</div>
		);
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "signCode",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/sign/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		handleOperating: (items: OperatingItem[]) => [
			{
				type: "modal",
				props: {
					btnText: "奖品设置",
					modalProps: {
						width: 1200,
						footer: false,
						title: "奖品设置",
						content: {
							render: (vm: any, getModalRef: any) => {
								return handelFunc(vm);
							},
						},
						onCancel: (table: any) => {
							table?.reload();
						},
					},
				},
			},
			...items,
		],
	};

	// 初始化加载数据
	useEffect(() => {
		getRewardItemList(10);
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
